<template>
  <div class="app-container" align="center" style="width: 1300px">
    <div :style="{width: '80%'}">
      <el-row type="flex" justify="center" align="top">
        <el-col :span="11">
          <div align="center">
            <el-card :hidden = "!friendHidden" style="width: 420px" class="box-card" shadow="hover">
              <div class="text item">
                无好友请求
              </div>
            </el-card>
            <el-card :hidden = "friendHidden" class="friend-card" align="center" shadow="hover"  :style="{marginRight: '20px'}">
              <div align="center">
                <el-table
                  ref="tableList"
                  v-loading="friendReqLoading"
                  :data="friendReqList"
                  style="width: 100%"
                >
                  <el-table-column label="人脉请求" align="center">
                    <template slot-scope="scope">
                      <el-row type="flex" justify="start" align="top">
                        <el-col :span="4">
                          <el-avatar :size="medium" :src="scope.row.avatar"></el-avatar>
                        </el-col>
                        <el-col :span="10">
                          <div class="text-nickName" align="start">{{scope.row.nickName}}</div>
                          <div class="text-brief" align="start">{{scope.row.signature}}</div>
                        </el-col>
                        <el-col :span="10">
                          <el-tooltip class="item" effect="dark" content="名片" placement="bottom">
                            <el-button icon="el-icon-user" @click="showDialog(scope.row, 'request')" circle></el-button>
                          </el-tooltip>
                          <el-tooltip class="item" effect="dark" content="接受请求" placement="bottom">
                            <el-button icon="el-icon-check" @click="friendAccept(scope.row)" circle></el-button>
                          </el-tooltip>
                          <el-tooltip class="item" effect="dark"  content="删除" placement="bottom">
                            <el-button icon="el-icon-delete" @click="removeDataById(scope.row, 'request')" circle></el-button>
                          </el-tooltip>
                        </el-col>
                      </el-row>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class="pagination-container">
                <el-pagination
                  :style="{width: '100%'}"
                  background
                  layout="prev, pager, next"
                  :page-size="friendReq.pageSize"
                  :current-page.sync="friendReq.pageNum"
                  :total="friendReq.total"
                  @size-change="handleFriendReqSizeChange"
                  @current-change="handleFriendReqCurrentChange"
                />
              </div>
            </el-card>
          </div>
        </el-col>

        <el-col :span="13">
          <div align="center">
            <el-card :hidden = "!recommendHidden" style="width: 420px" class="box-card" shadow="hover">
              <div class="text item">
                无推荐消息
              </div>
            </el-card>
            <el-card :hidden = "recommendHidden" class="friend-card" align="center" shadow="hover" >
              <div align="center">
                <el-table
                  ref="tableList"
                  v-loading="recommendListLoading"
                  :data="recommendList"
                  style="width: 100%"
                >
                  <el-table-column label="推荐消息" align="center">
                    <template slot-scope="scope">
                      <el-row type="flex" justify="start" align="top">
                        <el-col :span="5">
                          <el-avatar :size="medium" :src="scope.row.avatar"></el-avatar>
                        </el-col>
                        <el-col :span="11">
                          <div class="text-nickName" align="start">{{scope.row.nickName}}</div>
                          <div class="text-brief" align="start">{{scope.row.signature}}</div>
                        </el-col>
                        <el-col :span="8">
                          <div class="text-nickName" align="start">推荐人：</div>
                          <div class="text-brief" align="start">{{scope.row.reference}}</div>
                        </el-col>
                        <el-col :span="10">
                          <el-tooltip class="item" effect="dark" content="名片" placement="bottom">
                            <el-button icon="el-icon-user" @click="showDialog(scope.row, 'recommend')" circle></el-button>
                          </el-tooltip>
                          <el-tooltip class="item" effect="dark" content="添加好友" placement="bottom">
                            <el-button icon="el-icon-plus" @click="friendRequest(scope.row)" circle></el-button>
                          </el-tooltip>
                          <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
                            <el-button icon="el-icon-delete" @click="removeDataById(scope.row, 'recommend')" circle></el-button>
                          </el-tooltip>
                        </el-col>
                      </el-row>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class="pagination-container">
                <el-pagination
                  :style="{width: '100%'}"
                  background
                  layout="prev, pager, next"
                  :page-size="recommendParam.pageSize"
                  :current-page.sync="recommendParam.pageNum"
                  :total="recommendParam.total"
                  @size-change="handleRecommendSizeChange"
                  @current-change="handleRecommendCurrentChange"
                />
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 对话框 -->
    <el-dialog title="名片" :visible.sync="dialogVisible" width="700px" @close="dialogVisible = false">
      <!-- 内容主体 -->
      <div align="center">
        <el-card class="friend-card" align="center" shadow="hover">
          <div class="block">
            <el-avatar :size="80" :src="cardInfo.avatar"></el-avatar>
          </div>
          <div style="padding: 14px;">
            <div class="text-nickName" :style="{marginBottom: '10px'}">{{cardInfo.nickName}}</div>
            <div class="text-brief-long">{{cardInfo.signature}}</div>
            <el-tag size="small" type="success" class="card-tag">{{cardInfo.profession}}</el-tag>
            <el-tag size="small" class="card-tag">{{ cardInfo.gender === 1 ? '男' : '女' }}</el-tag>
            <div class="text-info">职业：{{cardInfo.profession}}</div>
            <div class="text-info">生日：{{cardInfo.birthday}}</div>
            <div class="text-info">手机：{{cardInfo.phone}}</div>
            <div class="text-info">邮箱：{{cardInfo.email}}</div>
            <div slot="footer" align="center">
              <el-button v-if="this.type === 'request'" type="primary" round size="small" @click="friendAccept(cardInfo)">接受好友请求</el-button>
              <el-button v-if="this.type === 'recommend'" type="primary" round size="small" @click="friendRequest(cardInfo)">发送好友请求</el-button>
              <el-button v-if="this.type === 'request'" type="danger" round size="small" @click="removeDataById(cardInfo, 'request')">删除请求</el-button>
              <el-button v-if="this.type === 'recommend'" type="danger" round size="small" @click="removeDataById(cardInfo, 'recommend')">删除推荐</el-button>
            </div>
          </div>
        </el-card>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import request from '@/utils/request'
import {mapGetters} from "vuex";

export default {
  computed: {
    ...mapGetters([
      'user'
    ])
  },
  data() {
    return {
      friendHidden: true,
      recommendHidden: true,
      keywordOptions: [{
        "label": "昵称",
        "value": "nickName"
      }, {
        "label": "职业",
        "value": "profession"
      }],
      type: 'friend',
      card: {},
      friendReq: {
        userId: '',
        total: 1,
        pageNum: 1,
        pageSize: 5
      },
      recommendParam: {
        userId: '',
        total: 1,
        pageNum: 1,
        pageSize: 5
      },
      friendReqList: [],
      recommendList: [],
      friendReqLoading: false,
      recommendListLoading: false,
      // 对话框
      cardInfo: {},
      dialogVisible: false,

    }
  },
  created() {
    this.getFriendReqList()
    this.getRecommendList()
  },
  methods: {

    getFriendReqList() {
      this.friendHidden = true
      this.friendReqLoading = true
      // this.getList(this.friendReq)
      const params = this.friendReq
      params.userId = this.user.id
      request({
        url: '/recommend/pageFriendRequest',
        method: 'get',
        params
      }).then(response => {
        if (response.retCode !== '200') {
          return
        }
        this.friendHidden = false
        this.friendReqList = response.data.records
        console.log(response.data)
        this.friendReq.total = response.data.total
        this.friendReqLoading = false
      })
    },
    getRecommendList() {
      this.recommendHidden = true
      this.recommendListLoading = true
      // this.getList(this.friendReq)
      const params = this.recommendParam
      params.userId = this.user.id
      request({
        url: '/recommend/pageRecommend',
        method: 'get',
        params
      }).then(response => {
        if (response.retCode !== '200') {
          return
        }
        this.recommendHidden = false
        this.recommendList = response.data.records
        console.log(response.data)
        this.recommendParam.total = response.data.total
        this.recommendListLoading = false
      })
    },


    // 显示对话框
    showDialog(row, str) {
      this.type = str
      this.cardInfo = row
      this.dialogVisible = true
    },

    // 接受好友请求
    async friendAccept(friendReq){

      const confirmResult = await this.$confirm(
        '接受好友请求?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }
      ).catch(err => err)
      // 点击确定 返回值为：confirm
      // 点击取消 返回值为： cancel
      if (confirmResult === 'confirm') {
        const params = friendReq
        request({
          url: '/recommend/agreeFriendReq',
          method: 'get',
          params
        }).then(response => {
          if (response.retCode !== '200') return this.$message.warning(response.retMsg)
          this.$message.success('添加好友成功！')
          this.getFriendReqList()
        })
      }
    },
    // 接收推荐信息，发送好友请求
    async friendRequest(recommend){
      const confirmResult = await this.$confirm(
        '确定向该用户发送好友请求吗?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }
      ).catch(err => err)
      // 点击确定 返回值为：confirm
      // 点击取消 返回值为： cancel
      if (confirmResult === 'confirm') {
        const params = recommend
        params.reference = this.user.nickName
        request({
          url: '/recommend/acceptRecommend',
          method: 'get',
          params
        }).then(response => {
          console.log("发送请求")
          console.log(response.retCode)
          if (response.retCode !== '200') return this.$message.warning(response.retMsg)
          this.$message.success('发送请求成功！')
          this.getFriendReqList()
        })
      }
    },
    // 删除
    async removeDataById(param, str) {
      const confirmResult = await this.$confirm(
        '此操作将永久删除该消息, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
      // 点击确定 返回值为：confirm
      // 点击取消 返回值为： cancel
      if (confirmResult === 'confirm') {
        const params = param
        request({
          url: '/recommend/delete',
          method: 'get',
          params
        }).then(response => {
          if (response.retCode !== '200') return this.$message.error('删除失败！')
          this.$message.success('删除成功！')
          if (str === 'request') {
            this.getFriendReqList()
          }
          if (str === 'recommend') {
            this.getRecommendList()
          }
        })
      }
    },
    // 监听 pagesize改变的事件
    handleFriendReqSizeChange(newSize) {
      this.friendReq.pageSize = newSize
      this.getFriendReqList()
    },
    // 监听 页码值 改变事件
    handleFriendReqCurrentChange(newSize) {
      this.friendReq.pageNum = newSize
      this.getFriendReqList()
    },

    // 监听 pagesize改变的事件
    handleRecommendSizeChange(newSize) {
      this.recommendParam.pageSize = newSize
      this.getRecommendList()
    },
    // 监听 页码值 改变事件
    handleRecommendCurrentChange(newSize) {
      this.recommendParam.pageNum = newSize
      this.getRecommendList()
    },
  }
}
</script>

<style lang="scss" scoped>
  .text {
    font-size: 14px;
    color: #409EFF;
  }

  .item {
    margin-bottom: 0px;
  }

</style>
